<template>
  <div class="home bg">
    <header class="bg">
      <ToolTip />
      <nav>
        <RouterLink to="/weather">
          <div class="title">
            <i class="fa-solid fa-sun"></i>
            <p class="text">新中地天气</p>
          </div>
        </RouterLink>
        <div class="box">
          <h4>{{ thisWeather.city }}</h4>
          <span>实时天气：{{ thisWeather.weather }} {{ +thisWeather.temperature }}℃</span>
          <span>{{ thisWeather.winddirection }}风{{ thisWeather.windpower }}级</span>
        </div>
        <div class="use">
          <i class="fa-solid fa-circle-info" @click="clickShowTip"></i>
          <i
            v-if="!cityList.some((item) => item.city === cityNameResolved)"
            class="fa-solid fa-plus"
            @click="addCity(cityNameResolved, adcode, searchDayWeather.temperature)"
          ></i>
        </div>
      </nav>
    </header>
    <main v-if="weatherReady && cityNameResolved">
      <p class="p1">
        你正在预览{{ cityNameResolved }}的天气信息，可以通过右上角的"+"号按钮保存起来
      </p>
      <div class="container">
        <h1>当日气温是：{{ searchDayWeather.temperature }}摄氏度</h1>
        <h1>当日天气是：{{ searchDayWeather.weather }}</h1>
        <h1>当日风向是：{{ searchDayWeather.winddirection }}风</h1>
        <h1>当日风力是：{{ searchDayWeather.windpower }}级</h1>
      </div>
      <hr />
      <div class="box">
        <div class="weather">
          <div class="gap">
            <div class="gap-1" v-for="(item, index) in searchWeatherData" :key="index">
              <span>{{ day(item.week) }}</span>
              <span>{{ item.date.slice(5) }}</span>
              <span>{{ item.dayweather }}</span>
              <span>风力 {{ item.daypower }}级</span>
            </div>
          </div>
          <div class="chart">
            <v-chart :option="searchoption"> </v-chart>
          </div>
        </div>
      </div>
    </main>
    <main v-else-if="!weatherReady">
      <h1 style="text-align: center">天气信息加载中...</h1>
    </main>
    <main v-else>
      <h1 style="text-align: center; margin-top: 10px">请输入正确的查讯条件</h1>
    </main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import ToolTip from '@/components/ToolTip.vue'

import { RouterLink, useRoute } from 'vue-router'
import { serachWeather, getTodayWeather, getCityWeather } from '@/api'
import { useWeatherStore } from '@/stores/weather'
import { storeToRefs } from 'pinia'
import VChart from 'vue-echarts'
const route = useRoute()
const {
  thisWeather,
  searchWeatherData,
  day,
  cityList,
  weatherReady,
  cityNameResolved,
  adcode,
  searchoption,
  searchDayWeather
} = storeToRefs(useWeatherStore())
const { renderChart, addCity,clickShowTip, } = useWeatherStore()
onMounted(async () => {
  cityNameResolved.value = route.query.search
  adcode.value = route.params.adcode
  thisWeather.value = await getTodayWeather()
  setInterval(
    async () => {
      thisWeather.value = await getTodayWeather()
    },
    1000 * 60 * 60
  )
  if (cityNameResolved.value) {
    searchWeatherData.value = await serachWeather(adcode.value)
    searchDayWeather.value = await getCityWeather(adcode.value)
  }
  searchoption.value = renderChart(searchWeatherData.value)
  weatherReady.value = true
})
</script>

<style lang="scss" scoped>
.bg {
  background-color: rgb(0, 102, 138);
}
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  header {
    position: sticky;
    top: 0;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
      0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
      var(--tw-shadow);
    z-index: 10;
    nav {
      display: flex;
      gap: 1rem;
      align-items: center;
      width: 1536px;
      margin: 0 129.5px 0 129.5px;
      padding: 24px 160px;
      color: #fff;
      .title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        i {
          font-weight: 900;
          font-size: 1.5rem;
          line-height: 2rem;
        }

        .text {
          font-size: 1.5rem;
          line-height: 2rem;
        }
      }
      .box {
        display: flex;
        align-items: center;
        gap: 1rem;
        h4 {
          font-size: 1.125rem;
          line-height: 1.75rem;
          font-weight: inherit;
        }
        span {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }
      .use {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        flex: 1 1 0%;
        i {
          font-size: 1.25rem;
          line-height: 1.75rem;
          font-weight: 900;
          transition-duration: 1s;
          cursor: pointer;
          &:hover {
            color: rgb(0 78 113);
          }
        }
      }
    }
  }
  main {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    .container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      margin: 24px 129.5px 0 129.5px;
      padding: 0 160px;
      h1 {
        font-size: inherit;
        font-weight: inherit;
      }
    }
    hr {
      color: inherit;
      border-top-width: 1px;
      margin-top: 24px;
      border-color: rgb(255 255 225/0.2);
      margin-top: 24px;
    }
    .p1 {
      text-align: center;
      padding: 8px;
      --tw-bg-opacity: 1;
      background-color: rgb(0 78 113 / var(--tw-bg-opacity));
    }
    .box {
      margin: 0 129.5px;
      padding: 0 160px;
      .weather {
        --tw-bg-opacity: 1;
        background-color: rgb(0 78 113 / var(--tw-bg-opacity));
        margin-top: 8px;
        padding: 40px 48px 0;
        .gap {
          display: flex;
          gap: 1.5rem;
          height: 144px;
          .gap-1 {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 1 1 0%;
            text-align: center;
            span {
              font-size: 16px;
              line-height: 24px;
            }
          }
        }
        .chart {
          margin-top: 40px;
          width: 1120px;
          height: 160px;
        }
      }
    }
  }
}
.tip {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all 1s;
  background-color: rgba(0 0 0 / 0.5);
  z-index: 11;
  .info {
    margin: 150px auto;
    width: 330px;
    background-color: #fff;
    padding: 16px;
    z-index: 999;
    h2 {
      font-size: inherit;
      font-weight: inherit;
    }
    p {
      font-size: 0.75rem;
      line-height: 1rem;
    }
    .p {
      margin-bottom: 16px;
    }
    button {
      width: 76px;
      height: 34px;
      font-size: 0.75rem;
      color: #fff;
      background-color: rgb(0, 102, 138);
      margin-top: 32px;
      padding: 8px 24px;
      cursor: pointer;
    }
  }
}
</style>
